<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      class="vc-search"
      :style="visual.parseStyle(compStyle)"
    >
      <div class="vc-search-input">
        <el-input :placeholder="compStyle['placeholder']" v-model="currValue" />
      </div>
      <div class="vc-search-icon">
        <cc-icon iconId="018dc9c3efe489a7d117" @click="clickIcon" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick, onUnmounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const currNode = ref(props.node);
const currValue = ref('');
const compStyle = ref({});
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  await nextTick(() => initializing.value = false);
};

const loadValue = async() => {
  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
  currValue.value = dataList.length > 0 && dataList[0]['内容'] || '';
};

const clickIcon = () => {
  eventHandler.trigger('点击查询事件');
};

const getData = () => {
  return {
    value: currValue.value || '',
    inputParam: currNode.value.inputParam || {}
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  initializing.value = true;
  await loadValue();
  await nextTick(() => initializing.value = false);
};

onMounted(async() => {
  await init();
  await loadValue();
  await eventHandler.trigger('初始化事件');
});

onUnmounted(() => {
  eventHandler.unregister();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-search {
  flex-grow: 1;
  .vc-search-input {
    :deep(.el-input__wrapper) {
      background-color: transparent!important;
      border: none!important;
      box-shadow: none!important;
    }
  }
  .vc-search-icon {
    cursor: pointer;
  }
}
</style>